<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>考试专业管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<!-- 引用css -->
	<link type="text/css" rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
	<link type="text/css" rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
	<link type="text/css" rel="stylesheet" href="../bootstrap/css/bootstrap-fileinput.css" />
	<link type="text/css" rel="stylesheet" href="../bootstrap/css/bootstrap-datetimepicker.min.css"/>
	<link rel="stylesheet" href="../css/commod.css" type="text/css">
	<link href="../css/css/component.css" rel="stylesheet">
	<!-- 引用js -->
	<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../bootstrap/js/docs.min.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap-fileinput.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap-switch.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap-paginator.js"></script>

	<script type="text/javascript" src="../bootstrap/js/moment-with-locales.min.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../bootstrap/jquery.qrcode.min.js"></script>

	<script type="text/javascript" src="../common/util.js"></script>
	<script type="text/javascript" src="../common/page.js"></script>

	<!--去掉悬浮窗 -->
	<style type="text/css">
		.cl-dashboard{display: none}
		.pageCss {
			display: inline-block;
			padding-left: 0;
			padding-right: 25px;
			margin: 20px 0;
			border-radius: 4px;
		}
	</style>

	<link title="" href="../formwork/css/style.css" rel="stylesheet" type="text/css"/>
	<link title="blue" href="../formwork/css/dermadefault.css" rel="stylesheet" type="text/css"/>
	<link title="green" href="../formwork/css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled"/>
	<link title="orange" href="../formwork/css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled"/>
	<link href="../formwork/css/templatecss.css" rel="stylesheet" title="" type="text/css" />

</head>
<body>
	<div class="container-fluid">
	    <div class="info-center" id="hader_h2">
			<h2>考试类型管理</h2>
	    </div>
		<div class="border_div">
			<div class="bg-info width_height_padding">
				<span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;筛选查询
			</div>
		<div class="width_padding">
				<form action="" class="form-inline" onsubmit="return false">
				<div class="row">
					<div class="form-group col-md-5">
						<label for="">搜索：</label>
						<input type="text" class="form-control" id="queryExamName" name="queryExamName" style="width: 75%" placeholder="请输入考试类型名字" />
					</div>

					<div class="form-group col-md-2">
						<input type="button" id="query" class="btn btn-primary col-md-4" value="查询"/>
						<input type="button" class="btn btn-default col-md-4 margin-width"" value="重置"/>
					</div>
				</div>
				</form>
			</div>
		</div>
		<!--  -->
			<div class="table-responsive" style="margin-top: 30px;">
				<table class="table table-striped table-bordered table-hover text-center" id="allExamType">
					<tr>
						<td colspan=8>
								<div class="pull-left">
									<a href="toAddExamType" class="btn btn-info">添加考试类型</a>
								</div>
						</td>
					</tr>
					<tr class="info">
						<th class="text-center">考试类型名字</th>
						<th class="text-center">添加时间</th>
						<th class="text-center">备注</th>
						<th class="text-center">操作</th>
					</tr>
					<tr>
						<td colspan=8>
							<div id="pagePlus">
								<!-- 分页 -->
								<div class="pull-left">
									<span class="pageCss" id="pageleft"></span>
								</div>
								<!-- 引用分页 -->
								<div class="pull-left">
									<ul class="pagination" id="pageId">
									</ul>
								</div>
								<div class="pull-right">
									<span class="pageCss">每页显示</span>
									<span class="pageCss"> <select name="pageSelect" id="pageSelect"
																   class="form-control" style="width: 95%">
												<option value="10">10</option>
												<option value="20">20</option>
												<option value="50">50</option>
												<option value="100">100</option>
												<option value="200">200</option>
												<option value="500">500</option>
										</select>
										</span>
								</div>
								<script>
									$(".pagination li").click(function() {
										$(this).addClass("active");
										$(".pagination li").not($(this)).removeClass("active");
									});
								</script>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>

	<!--<div class="md-modal md-effect-2" id="modal-1">-->
		<!--<div class="modal-dialog modal-sm" role="document">-->
			<!--<div class="md-content">-->
				<!--<div class="modal-header bg-primary text-center"-->
					<!--style="height: 10px;font-size: 18px;">删除提示</div>-->
				<!--<div class="modal-body" style="padding-bottom: 15%">-->
					<!--<div>是否删除数据？</div>-->
					<!--<br> <input type="button"-->
						<!--class="btn btn-default md-close pull-right margin-width" value="否" />-->
					<!--<input type="button" class="btn btn-primary pull-right " value="是" />-->
				<!--</div>-->

			<!--</div>-->
		<!--</div>-->
	<!--</div>-->

	<!-- 提示删除语 -->
	<div class="modal fade" id="deleteModel">
		<div class="modal-dialog">
			<div class="modal-content message_align">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="modal-title">提示信息</h4>
				</div>
				<div class="modal-body">
					<p>您确认要删除吗？</p>
				</div>
				<div class="modal-footer">
					<!-- 删除隐藏唯一标识 -->
					<input type="hidden" id="delExamId"/>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<a  id="submitDelete" class="btn btn-success" data-dismiss="modal">确定</a>
				</div>
			</div>
		</div>
	</div>

	<!-- 自考类型修改div -->
	<div id="examTypeModify" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<button class="close" data-dismiss="modal">
						<span>&times;</span>
					</button>
				</div>
				<div class="info-center" id="hader_h2">
					<h2>修改考试类型</h2>
				</div>
				<div class="modal-title">
					<span class="lead"><strong class="red">*</strong>基本信息</span>
				</div>

				<div class="modal-body">
					<form action="" id="modifyForm" class="form-group" onsubmit="return false">
						<!-- 隐藏考试类型编号 -->
						<input type="hidden" name="examId" id="examId"  class="form-control" />

						<div class="form-group">
							<label for="" class="col-sm-3 control-label">考试名字：</label>
							<input type="text" name="examName" id="modifyExamName"  class="form-control" />
						</div>

						<div class="form-group">
							<label for="" class="col-sm-3 control-label">备注：</label>
							<textarea rows="4" cols="10" style="resize: none;" class="form-control"  name="description" id="description"></textarea>
						</div>

						<div class="text-right">
							<label for="" class="col-sm-3"></label>
							<!--<button class="btn btn-danger" data-dismiss="modal">取消</button>-->
							<!--<input type="submit" id="saveType" class="btn btn-primary margin-width" value="保存" />-->
							<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
							<button type="button" id="saveType" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

<script src="../js/js/classie.js"></script>
<script src="../js/js/modalEffects.js"></script>

<script type="text/javascript">
    $(function(){

        // 初始化
		init();

        /*
        * 查询
        * */
        $("#query").click(function () {
            var page = 1;
            var pageSize = $("#pageSelect").val();
			query(page, pageSize);
		});

        // 修改保存
        $("#saveType").click(function () {
            var examId = $("#examId").val();
            var examName = $("#modifyExamName").val();
            var description = $("#description").val();

            var data = {
                "examId" : examId,
                "examName" : examName,
                "description" : description
            }
            $.ajax({
                url:getRootPath()+'/course/modifyExamType',
                type:"post",
                dataType:"json",
                data:JSON.stringify(data),
                contentType:"application/json",
                success : function(result) {
                    if (result.status == '0') {
                        window.location.href = getRootPath() + result.uri;
                    } else {
                        alert(result.message)
                    }
                },
                error : function (result) {
                    alert("fail!")
                }
            });
        });

        // 删除
        $("#submitDelete").click(function () {
            var examId = $("#delExamId").val();

            $.ajax({
                url:getRootPath()+'/course/deleteExamType?examId=' + examId,
                type:"get",
                success : function(result) {
                    if (result.status == '0') {
                        window.location.href = getRootPath() + result.uri;
                    } else {
                        alert(result.message)
                    }
                },
                error : function (result) {
                    alert("fail!")
                }
            });
        });

        // 选择框动态选择
        $("#pageSelect").change(function () {
            var page = 1;
            var pageSize = $('#pageSelect').val();
            $("#pageleft").text("");
            $("#pageId").bootstrapPaginator(null);
            query(page, pageSize);
        });

    })

	/*
	* 初始化
	*/
	function  init() {
		var page = 1;
		var pageSize = 10;
		$('#pageSelect').val('10');
        query(page, pageSize);
    }

    /**
     * 修改按钮
     * @param examName
     * @param description
     */
    function modify(examId, examName, description) {
////        window.location.href = getRootPath() + "/course/toModifyExamType?examName="+examName + "&description="+description;
//        var data = {
//            "examName":examName,
//			"description":description
//        };
//
//        window.location.href = getRootPath() + "/course/toModifyExamType?data=" + data;
		$("#modifyExamName ").val(examName);
		$("#description").val(description);
        $("#examId").val(examId);
        // 开启修改框
        $('#examTypeModify').modal();
    }

    /**
     * 删除按钮
     * @param examName
     * @param description
     */
    function deleteOp(examId) {
        $("#delExamId").val(examId);
        // 开启删除提示框
        $("#deleteModel").modal();
    }

    /**
	* 查询
	 */
	function  query(page, pageSize) {
        var examName = $("#queryExamName").val();
        if (examName == '请输入考试类型名字') {
            examName = "";
		}
        var data = {
            "examName":examName
        };
        $.ajax({
            url:getRootPath()+'/course/examTypeList?page='+ page +'&pageSize=' + pageSize,
            type:"post",
            dataType:"json",
            data:JSON.stringify(data),
            contentType:"application/json",
            success : function(data) {
                if (data.status == '0') {
                    var list = data.viewData.datas;
                    var result = '';
                    $("#allExamType .dataInfo").remove();
                    for (var i = 0; i < list.length; i++) {
                        var d = list[i];
//                        result += '<tr class=\"dataInfo\">' +
//							'<td>' + d.examName + '</td>' +
//                            '<td>' + d.createTime  + '</td>' +
//                            '<td>' + d.description + '</td>' +
//                            '<td style="margin: 0;padding: 0"><a href="javascript:void(0)"  id="modify" onclick="modify('"+ d.description +"')" class=\"btn btn-link\">编辑</a>'+
//                            '<a href="javascript:;" class="md-trigger btn  btn-link" data-modal="modal-1">删除</a></td>' +
//							'</tr>';
//                        result += "<tr class=\"dataInfo\">" +
//                            "<td>" + d.examName + "</td>" +
//                            "<td>" + d.createTime  + "</td>" +
//                            "<td>" + d.description + "</td>" +
//                            "<td style=\"margin: 0;padding: 0\"><a href=\"javascript:void(0)\"  id=\"modify\" onclick=\"modify('"+ d.examName +"', '"+ d.description +"')\" class=\"btn btn-link\">编辑</a>"+
//                        "<a href=\"javascript:;\" class=\"md-trigger btn  btn-link\" data-modal=\"modal-1\">删除</a></td>" +
//                        "</tr>";

                        result += "<tr class=\"dataInfo\">" +
								+ "<input type=\"hidden\" id=\"examId\" name=\"examId\" value=\"'" + d.examId + "'\"/>" +
                            "<td>" + d.examName + "</td>" +
                            "<td>" + d.createTime  + "</td>" +
                            "<td>" + d.description + "</td>" +
                            "<td style=\"margin: 0;padding: 0\"><a data-toggle=\"modal\" onclick=\"modify('"+ d.examId +"', '"+ d.examName +"', '"+ d.description +"')\"  href=\"\" class=\"btn btn-link\">编辑</a>" +
                            "<a data-toggle=\"modal\" href=\"\" onclick=\"deleteOp('"+ d.examId +"')\" class=\"md-trigger btn  btn-link\" >删除</a></td>" +
                            "</tr>";
					}
					console.log(result);
					$("#allExamType .info").after(result);
                    pageFn.setPageProperties($('.pagination'), data, {currentPage: page, pageSize: pageSize});
                } else {
                    alert(result.message)
                }
            },
            error : function (result) {
                alert("fail!")
            }
        });

    }

</script>

</body>
</html>